<template>
  <div id="navigation">
    <div class="caiDan">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">前期节点计划</el-menu-item>
        <el-menu-item index="2">月度计划</el-menu-item>
        <el-menu-item index="3">年度计划</el-menu-item>
      </el-menu>
      <div class="caiDanButton">
        <el-button type="primary" round icon="el-icon-edit-outline"
          >导出报表</el-button
        >
      </div>
      <div>
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "jiHuaNavigation",
  data() {
    return {
      activeIndex: 1,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
#navigation {
  background-color: #94c9d8;
  width: 100%;
  height: 50px;
  .caiDan {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /deep/.el-menu.el-menu--horizontal {
      height: 49px;
      width: 370px;
      background-color: #94c9d8;
      .el-menu-item {
        height: 49px;
        color: white;
        background-color: #94c9d8;
        line-height: 49px;
      }
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      border: none;
      color: #c7d6d7;
      background-color: #e29413;
    }
    .caiDanButton {
      .el-button {
        background-color: #5ca9d3;
        width: 123px;
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>